import { ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { findTopCategory } from '@/api/category.js'
function useCategory () {
  /*
  解决缓存问题:
  vue-router 为了性能考虑 如果路径不变 对应的组件也不会重新渲染
  思路:
  1.监听id的变化  重新使用最新id发送请求接口
  watch
  beforeRouteUpdate: router内部的钩子函数, 每次路由切换之前,都执行一次,在里面我们可以拿到当前最新的id参数
  在里面重新发送数据请求即可
  精确控制  不会存在浪费

  2.尝试破环它的缓存机制, 不让它缓存(二级路由出口 + key)
  key在这里强制替换元素/组件而不是重复使用它:使用场景:完整地触发组件的生命周期函数; 触发过渡
  router-view + :key="$route.fullPath"
  简单粗暴, 一旦加上key之后. 所有的缓存都没了
  可能会存在浪费
  */

  // 轮播图下面的二级分类(不同商品分类)
  // 接口要求 需要路径上的 id 作参数
  const TopCategoryList = ref([])
  const route = useRoute()

  // 页面初次刷新时,需要默认参数路径id(接口要求)
  // id = route.params.id 等号前是 变化后的参数, 等号后是 默认参数
  async function loadTopCategory (id = route.params.id) {
    // 传参才接收参数
    const res = await findTopCategory(id)
    TopCategoryList.value = res.result.children
  }
  loadTopCategory()
  // onBeforeRouteUpdate 是 vue-router内部的 钩子函数
  onBeforeRouteUpdate((to) => {
    // console.log(to)返回的是有关将要去的路径相关数据
    loadTopCategory(to.params.id)
  })
  return { TopCategoryList }
}
export default useCategory
